<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例使用dispose销毁</title>
</head>



<body>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.js"></script>
    <h1>
        <button type="button" onclick="showHander()">展示实例</button>
        <button type="button" onclick="desHander()">销毁实例</button>
        <button type="button" onclick="qingkong()">清空当前实例</button>
    </h1>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px; background: pink;"></div>

    <script type="text/javascript">
        //获取dom节点
        const myChart = echarts.init(document.getElementById('main'));
        // 初始化echarts
        const xuanranInt = () => {
            // 初始化echarts实例

            const option = {
                title: {
                    text: "ECharts 入门示例",
                },
                tooltip: {},
                legend: {
                    data: ["作者一"],
                },
                xAxis: {
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周七"],
                },
                yAxis: {},
                series: [
                    {
                        name: "作者一",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20, 22],
                    },

                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        // 调用
        xuanranInt();

        // 重新渲染echarts
        const showHander = () => {
            xuanranInt();
        }

        // 销毁实例
        const desHander = () => {

            // 销毁实例，销毁后实例无法再被使用。
            // 在什么情况下需要调用该函数进行销毁当前的实例呢？
            // 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，
            myChart.dispose();
        }
        // 清空当前实例
        const qingkong = () => {
            // 清空当前实例，会移除实例中所有的组件和图表。

            myChart.clear()
        }
    </script>
</body>

</html>